<template>
  <div class="stock-detail">
    <div class="header">
      <div class="stock-info">
        <h1>{{ stock.name }} ({{ stock.code }})</h1>
        <div class="price-info">
          <span class="current-price">{{ stock.currentPrice }}</span>
          <span :class="['price-change', stock.change >= 0 ? 'up' : 'down']">
            {{ stock.change >= 0 ? '+' : '' }}{{ stock.change }}%
          </span>
        </div>
      </div>
      <div class="action-buttons">
        <el-button type="primary" @click="addToWatchList" v-if="!isInWatchList">
          加入自选
        </el-button>
        <el-button type="danger" @click="removeFromWatchList" v-else>
          移除自选
        </el-button>
      </div>
    </div>

    <div class="content">
      <div class="row">
        <div class="col">
          <div class="card">
            <div class="card-header">
              <h3>K线图</h3>
              <div class="time-range">
                <el-radio-group v-model="timeRange" size="small">
                  <el-radio-button label="day">日K</el-radio-button>
                  <el-radio-button label="week">周K</el-radio-button>
                  <el-radio-button label="month">月K</el-radio-button>
                </el-radio-group>
              </div>
            </div>
            <div class="chart-container">
              <!-- 这里将集成ECharts图表 -->
              <div class="chart-placeholder">K线图展示区域</div>
            </div>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col">
          <div class="card">
            <div class="card-header">
              <h3>基本信息</h3>
            </div>
            <div class="info-grid">
              <div class="info-item">
                <span class="label">所属行业</span>
                <span class="value">{{ stock.industry }}</span>
              </div>
              <div class="info-item">
                <span class="label">总市值</span>
                <span class="value">{{ stock.marketCap }}</span>
              </div>
              <div class="info-item">
                <span class="label">市盈率</span>
                <span class="value">{{ stock.pe }}</span>
              </div>
              <div class="info-item">
                <span class="label">市净率</span>
                <span class="value">{{ stock.pb }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card">
            <div class="card-header">
              <h3>财务数据</h3>
            </div>
            <div class="financial-data">
              <el-table :data="financialData" style="width: 100%">
                <el-table-column prop="year" label="年份" width="100"></el-table-column>
                <el-table-column prop="revenue" label="营业收入(亿)"></el-table-column>
                <el-table-column prop="profit" label="净利润(亿)"></el-table-column>
                <el-table-column prop="growth" label="同比增长"></el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col">
          <div class="card">
            <div class="card-header">
              <h3>公司新闻</h3>
            </div>
            <div class="news-list">
              <div v-for="(news, index) in companyNews" :key="index" class="news-item">
                <div class="news-title">{{ news.title }}</div>
                <div class="news-time">{{ news.time }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'StockDetail',
  data() {
    return {
      timeRange: 'day',
      stock: {
        name: '贵州茅台',
        code: '600519',
        currentPrice: '1,850.00',
        change: 2.34,
        industry: '白酒',
        marketCap: '2.3万亿',
        pe: '35.6',
        pb: '12.8'
      },
      isInWatchList: false,
      financialData: [
        { year: '2023', revenue: '1,234.5', profit: '456.7', growth: '15.2%' },
        { year: '2022', revenue: '1,123.4', profit: '412.3', growth: '12.8%' },
        { year: '2021', revenue: '1,012.3', profit: '378.9', growth: '10.5%' }
      ],
      companyNews: [
        { title: '贵州茅台2023年业绩快报：净利润同比增长15.2%', time: '2024-04-28 09:30' },
        { title: '贵州茅台发布新产品系列，市场反响热烈', time: '2024-04-27 15:30' },
        { title: '贵州茅台入选2024年最具价值品牌榜单', time: '2024-04-26 10:15' }
      ]
    }
  },
  methods: {
    addToWatchList() {
      this.isInWatchList = true
      this.$message.success('已添加到自选股')
    },
    removeFromWatchList() {
      this.isInWatchList = false
      this.$message.success('已从自选股移除')
    }
  }
}
</script>

<style scoped>
.stock-detail {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
  width: 100%;
  margin: 0;
  padding: 0;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  margin: 20px;
}

.stock-info h1 {
  font-size: 24px;
  color: #303133;
  margin: 0 0 8px 0;
}

.price-info {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.current-price {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
}

.price-change {
  font-size: 18px;
}

.price-change.up {
  color: #f56c6c;
}

.price-change.down {
  color: #67c23a;
}

.content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0 20px;
}

.row {
  display: flex;
  gap: 24px;
}

.col {
  flex: 1;
}

.card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  padding: 16px;
  height: 100%;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.card-header h3 {
  font-size: 18px;
  color: #303133;
  margin: 0;
}

.chart-container {
  height: 400px;
  background: #f5f7fa;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chart-placeholder {
  color: #909399;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.info-item {
  display: flex;
  flex-direction: column;
}

.info-item .label {
  font-size: 14px;
  color: #606266;
  margin-bottom: 4px;
}

.info-item .value {
  font-size: 16px;
  color: #303133;
  font-weight: 500;
}

.news-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.news-item {
  padding: 8px 0;
  border-bottom: 1px solid #ebeef5;
}

.news-title {
  font-size: 14px;
  color: #303133;
  margin-bottom: 4px;
}

.news-time {
  font-size: 12px;
  color: #909399;
}
</style> 